<template>
  <el-dialog
    title="选择优惠劵"
    :visible.sync="visible"
    :before-close="handleClose"
    width="40%"
  >
    <Table :data="listData" :max-height="360">
      <el-table-column align="center" width="55">
        <template slot-scope="scope">
          <el-radio
            v-model="scope.row.radio"
            :label="1"
            @change="radioTag(scope.row.lg_coupon_id)"
          >
            <span style="display:none">dsd</span>
          </el-radio>
        </template>
      </el-table-column>
      <el-table-column
        label="优惠劵名称"
        align="center"
        property="title"
      ></el-table-column>
      <el-table-column label="优惠劵类型" align="center">
        <template slot-scope="scope">
          {{ scope.row.type == 0 ? "满减劵" : "折扣劵" }}
        </template>
      </el-table-column>
      <el-table-column label="有效期" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.type_time === 1">
            {{ scope.row.stime }} 至 {{ scope.row.etime }}</span
          >
          <span v-else
            >领取{{ scope.row.stime }}天后生效，{{
              scope.row.etime === 0 ? "永久有效" : `有效期${scope.row.etime}天`
            }}
          </span>
        </template>
      </el-table-column>
    </Table>
    <el-pagination
      style="text-align: center;margin-top: 10px;"
      :page-size="10"
      layout="prev, pager, next"
      :total="totals"
      @current-change="changes"
    >
    </el-pagination>

    <span slot="footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSumbit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { COUPON_LIST } from "../../service";

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    val: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      listData: [],
      pages: 1,
      totals: 0
    };
  },
  watch: {
    visible(v) {
      if (v) {
        this.getList();
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit("outDialog");
    },
    handleSumbit() {
      let json = this.listData.filter(ele => {
        return ele.radio === 1;
      });
      this.$emit("outDialog", json[0]);
    },
    changes(page) {
      this.pages = page;
      this.getList();
    },
    async getList() {
      let param = {
        page: this.pages,
        pageshow: 10,
        type: 1
      };

      await COUPON_LIST(param).then(({ code, data, msg }) => {
        if (code === 200) {
          this.totals = data.count;
          data.list.forEach(ele => {
            if (ele.lg_coupon_id === this.val) {
              ele.radio = 1;
            } else {
              ele.radio = 2;
            }
          });
          this.listData = data.list;
        } else {
          this.totals = 0;
          this.listData = [];
          this.$message.error(msg);
        }
      });
    },
    radioTag(id) {
      this.listData.forEach(ele => {
        if (ele.lg_coupon_id === id) {
          ele.radio = 1;
        } else {
          ele.radio = 2;
        }
      });
    }
  }
};
</script>
